<template>
  <div class="login-container">
    <!-- 左侧背景 -->
    <div class="login-left">
      <div class="left-content">
        <h2>美妆管理系统</h2>
        <p>专业的美妆产品管理与数据分析平台</p>
        <div class="sub-title">
          <span>商品管理</span>
          <span class="dot">•</span>
          <span>订单处理</span>
          <span class="dot">•</span>
          <span>数据分析</span>
        </div>
      </div>
    </div>
    
    <!-- 右侧登录表单 -->
    <div class="login-right">
      <div class="login-form-container">
        <h3>账号登录</h3>
        <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
          <!-- 租户输入框 -->
          <!-- <el-form-item prop="tenantName" v-if="tenantEnable">
            <el-input v-model="loginForm.tenantName" placeholder="请输入租户">
              <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item> -->
          
          <!-- 用户名输入框 -->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入账号">
              <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item>
          
          <!-- 密码输入框 -->
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" @keyup.enter.native="getCode">
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
            </el-input>
          </el-form-item>

          <!-- 记住密码 -->
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-form-item>
            <el-button :loading="loading" type="primary" class="login-btn" @click.native.prevent="getCode">
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 图形验证码组件 -->
    <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}" @success="handleLogin" />
  </div>
</template>

<script>
import {getTenantIdByName} from "@/api/system/tenant";
import {getCaptchaEnable, getTenantEnable} from "@/utils/ruoyi";
import {
  getPassword,
  getRememberMe, getTenantName,
  getUsername,
  removePassword, removeRememberMe, removeTenantName,
  removeUsername,
  setPassword, setRememberMe, setTenantId, setTenantName,
  setUsername
} from "@/utils/auth";

import Verify from '@/components/Verifition/Verify';

export default {
  name: "Login",
  components: {
    Verify
  },
  data() {
    return {
      codeUrl: "",
      captchaEnable: true,
      tenantEnable: true,
      loginForm: {
        username: "admin",
        password: "admin123",
        captchaVerification: "",
        rememberMe: false,
        tenantName: "芋道源码",
      },
      LoginRules: {
        username: [
          {required: true, trigger: "blur", message: "用户名不能为空"}
        ],
        password: [
          {required: true, trigger: "blur", message: "密码不能为空"}
        ],
        tenantName: [
          {required: true, trigger: "blur", message: "租户不能为空"},
          {
            validator: (rule, value, callback) => {
              getTenantIdByName(value).then(res => {
                const tenantId = res.data;
                if (tenantId && tenantId >= 0) {
                  setTenantId(tenantId)
                  callback();
                } else {
                  callback('租户不存在');
                }
              });
            },
            trigger: 'blur'
          }
        ]
      },
      loading: false,
      redirect: undefined,
    };
  },
  created() {
    this.tenantEnable = getTenantEnable();
    if (this.tenantEnable) {
      getTenantIdByName(this.loginForm.tenantName).then(res => {
        const tenantId = res.data;
        if (tenantId && tenantId >= 0) {
          setTenantId(tenantId)
        }
      });
    }
    this.captchaEnable = getCaptchaEnable();
    this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined;
    this.getCookie();
  },
  methods: {
    getCode() {
      if (!this.captchaEnable) {
        this.handleLogin({})
        return;
      }
      this.$refs.verify.show()
    },
    getCookie() {
      const username = getUsername();
      const password = getPassword();
      const rememberMe = getRememberMe();
      const tenantName = getTenantName();
      this.loginForm = {
        ...this.loginForm,
        username: username ? username : this.loginForm.username,
        password: password ? password : this.loginForm.password,
        rememberMe: rememberMe ? getRememberMe() : false,
        tenantName: tenantName ? tenantName : this.loginForm.tenantName,
      };
    },
    handleLogin(captchaParams) {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            setUsername(this.loginForm.username)
            setPassword(this.loginForm.password)
            setRememberMe(this.loginForm.rememberMe)
            setTenantName(this.loginForm.tenantName)
          } else {
            removeUsername()
            removePassword()
            removeRememberMe()
            removeTenantName()
          }
          this.loginForm.captchaVerification = captchaParams.captchaVerification
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({path: this.redirect || "/"}).catch(() => {});
          }).catch(() => {
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  overflow: hidden;

  .login-left {
    flex: 1;
    background: linear-gradient(135deg, #409EFF, #67C23A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 0 60px;

    .left-content {
      text-align: center;
      h2 {
        font-size: 48px;
        margin-bottom: 20px;
      }
      p {
        font-size: 20px;
        opacity: 0.9;
        margin-bottom: 25px;
      }
      .sub-title {
        font-size: 16px;
        opacity: 0.8;
        
        .dot {
          margin: 0 12px;
          opacity: 0.6;
        }
      }
    }
  }

  .login-right {
    width: 500px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 50px;
    position: relative;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);

    .login-form-container {
      width: 100%;

      h3 {
        font-size: 28px;
        color: #303133;
        margin-bottom: 40px;
        text-align: center;
        font-weight: 500;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 3px;
          background: #409EFF;
          border-radius: 2px;
        }
      }

      .login-form {
        .el-form-item {
          margin-bottom: 25px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .el-input {
          height: 50px;
          
          input {
            height: 50px;
            padding-left: 55px !important;
            font-size: 14px;
            background: #f5f7fa;
            border: none;
            border-radius: 25px;
            transition: all 0.3s ease;

            &:focus {
              background: #fff;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }

            &:hover {
              background: #fff;
            }
          }

          .el-input__prefix {
            left: 20px;
            height: 100%;
            display: flex;
            align-items: center;
          }
        }

        .input-icon {
          height: 18px;
          width: 18px;
          color: #909399;
          margin-left: 0;
        }

        .el-checkbox {
          color: #606266;
          
          .el-checkbox__label {
            font-size: 14px;
          }
          
          .el-checkbox__inner {
            &:hover {
              border-color: #409EFF;
            }
          }
        }

        .login-btn {
          width: 100%;
          height: 50px;
          font-size: 16px;
          font-weight: 500;
          border-radius: 25px;
          margin-top: 10px;
          background: linear-gradient(to right, #409EFF, #67C23A);
          border: none;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
          }

          &:active {
            transform: translateY(0);
          }
        }
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to bottom, rgba(64, 158, 255, 0.05), transparent);
      z-index: 0;
    }
  }
}

// 添加输入框动画效果
.el-form-item {
  transform: translateY(0);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

// 验证码样式优化
:deep(.verify-box) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>
